<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta charset="utf-8"/>
    <style>
        /* 全局样式设置 */
        body { text-align:left;font-size:13px; font-family:"宋体",Arial，Verdana;color:#3E3E3E; margin:0 auto;padding:0;}
        div,form,img,ul,ol,li,dl,dt,dd,td,span,a,th,tbody,h1,h2,h3,h4,h5,h6 { font-size:12px;font-family:"宋体",Arial，Verdana;margin:0; padding:0; border:0;text-decoration:none; }
        input,select,textarea{ font-size:12px;font-family:"宋体",Arial; }
        ul,ul li{ list-style:none;list-style-type:none; }
        /* 清除漂浮 */
        .clearfix{ zoom:1;}
        .clearfix:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;}



        .slidein,.slideout{
            -webkit-backface-visibility: hidden;
            -webkit-animation-timing-function: ease-out;
            -webkit-animation-duration: 300ms;
        }

        .slidein{
            -webkit-animation-name: slidein;
        }

        @-webkit-keyframes slidein{

            from { -webkit-transform: translateX(100%); }
            to { -webkit-transform: translateX(0); }
        }

        .slideout{
            -webkit-transform: translateX(-100%);
            -webkit-animation-name: slideout;
        }

        @-webkit-keyframes slideout{
            from { -webkit-transform: translateX(0); }
            to { -webkit-transform: translateX(-100%); }
        }

    </style>
    <script type="text/javascript" language="javascript" src="./jquery-1.11.0.js"></script>
    <script type="text/javascript" language="javascript" src="./touch.js"></script>
</HEAD>
<BODY>


<div  id="a_contain">
    <div style="width:100%;height:200px;background: red;overflow:auto;" id="zzw">
        <div id="content" style="width:1000px;height:200px;">
            我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容我有很长内容
       </div>
    </div>
</div>

<textarea>
    关于默认android中touchmove只触发一次的缺陷，
    我发现zepto在处理这个问题的时候方案是不监听具体某个元素的touchmove事件，
    而是监听document的touchmove事件，然后在touchmove中判断仅仅触发的这次move中 移动的距离不是超过10px
    如果超过 就阻止{e.preventDefault()} document上touchmove的默认行为，
    然后触发e.eventtarget的自定义事件
    swipleft swipright swipup swipdown等。
    在浏览器原生应为中 如果touchmove造成了内部内容的滚动，那么父容器不会收到touchmove事件，
    因为默认scroll行为已经把touchmove的冒泡阻止了
</textarea>

<SCRIPT LANGUAGE="JavaScript">
    document.documentElement.style.webkitTouchCallout = 'none';

    $('#content').on('touchstart',function(){
        console.log('content:touchstart');
    });
    $('#content').on('touchmove',function(){
        console.log('content:touchmove');
    });
    $('document').on('touchmove',function(){
        console.log('document:touchmove');
    });
    $('#zzw').singleTap(function(){
        alert('singleTap')
    });

    $('#zzw').doubleTap(function(){
        alert('doubleTap')
    });

    $('#zzw').longTap(function(){
        alert('longTap')
    });

    $('#zzw').swipeLeft(function(){
        alert('swipeLeft')
    });

    $('#zzw').swipeRight(function(){
        alert('swipeRight')
    });


</SCRIPT>





</BODY>
</HTML>
